<template>
	<view class="login-box">
		<nav-bar :title="i18n.login.register" @_back="_back" rightIcon="service" @rightClick="rightClick" />
		<view class="login-box-container">
			<tabs :list="navList" :fontSize="32" @click="navClick"></tabs>
			<custom-input v-model="info.username" icon="email" :placehold="i18n.login.enterAccount" v-if="!navCurrent"></custom-input>
			<custom-input v-model="info.username" @prefix="prefix" :iconWidth="22" isRegion :placehold="i18n.login.enterphone"
			 v-else></custom-input>
			<custom-input v-if="smsSwitc" v-model="info.code" :loginType="navCurrent" :smstype="1" :phoneName="info.username" icon="code"
			 isVerification :placehold="i18n.login.enterCode"></custom-input>
			<custom-input v-model="info.password" icon="password" isPwd :placehold="i18n.login.enterPassword"></custom-input>
			<custom-input v-model="info.password_again" icon="password" isPwd :placehold="i18n.login.enterPasswordAgain"></custom-input>
			<custom-input v-model="info.nickname" icon="user" :placehold="i18n.login.enterNickname"></custom-input>
			<custom-input v-model="info.invitation_code" :disabled="isWrite" icon="invitation" :placehold="i18n.login.enterInvitation"></custom-input>
			<custom-submit class="login-submit" :loading="loading" :title="i18n.login.register" @click="submit"></custom-submit>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar/index.vue'
	import CustomInput from '@/components/CustomInput/index.vue'
	import CustomSubmit from '@/components/CustomSubmit/index.vue'
	import Tabs from '@/components/Tabs/index.vue'
	import {
		Toast
	} from '@/utils/util.js'
	import {
		register,
		check_mobile,
		check_email
	} from '@/api/index.js'
	import {mapGetters} from 'vuex'
	export default {
		components: {
			NavBar,
			CustomInput,
			CustomSubmit,
			Tabs
		},
		computed: {
			...mapGetters(['smsSwitc']),
			i18n() {
				return this.$t('message');
			},
			navList() {
				return [{
						title: this.$t('message').login.reEmai,
						id: 0
					},
					{
						title: this.$t('message').login.rePhone,
						id: 1
					},
				]
			}
		},
		data() {
			return {
				navCurrent: 0,
				info: {
					prefix: '+86'
				},
				loading: false,
				isWrite: false
			}
		},
		onLoad(data) {
			if (data && data.code) {
				this.info.invitation_code = data.code;
				this.isWrite = true;
			}
		},
		methods: {
			navClick(val) {
				this.navCurrent = val.id;
			},
			_back() {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			},
			async submit() {
				if (!this.navCurrent && !this.info.username) return Toast(this.i18n.login.enterAccount);
				if (this.navCurrent && !this.info.username) return Toast(this.i18n.login.enterphone);
				if (!this.info.code && this.smsSwitc) return Toast(this.i18n.login.enterCode);
				if (!this.info.password) return Toast(this.i18n.login.enterPassword);
				if (!this.info.password_again) return Toast(this.i18n.login.enterPasswordAgain);
				if (this.info.password !== this.info.password_again) return Toast(this.i18n.common.towpswdifferent);
				if (!this.info.nickname) return Toast(this.i18n.login.enterNickname);
				this.logintype = !this.navCurrent ? 1 : 0;
				this.loading = true;
				let check = !this.smsSwitc? true: !this.navCurrent? await this.checkEmailCode(): await this.checkMobileCode();
				if (!check) return this.loading = check;
				let {error, res} = await register(this.info);
				if (error) return this.loading = false;;
				await Toast(this.i18n.login.registerSuccess);
				this.loading = false;
				this._back();
			},
			prefix(val) {
				this.info.prefix = val;
			},
			rightClick() {
				uni.navigateTo({
					url: '/pages/set/service'
				})
			},
			// 短信验证码验证
			async checkMobileCode() {
				let {error,res} = await check_mobile({mobile_code: this.info.code});
				if (error) return false;
				return true;
			},
			// 邮箱验证码验证
			async checkEmailCode() {
				let {error,res} = await check_email({email_code: this.info.code});
				if (error) return false;
				return true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-box {
		color: rgba(255, 255, 255, .4);

		.login-box-container {
			width: 630rpx;
			margin: 54rpx auto 0;

			.tabs-box {
				font-size: 32rpx;
				padding-bottom: 26rpx;
				border-bottom: 1px solid rgba(255, 255, 255, .1);
				position: relative;
				display: flex;
				justify-content: space-between;

				&>text {
					&.active {
						color: #EEC67F;
					}
				}

				&>p {
					width: 60rpx;
					height: 4rpx;
					position: absolute;
					bottom: 0;
					transition: left .2s linear;
				}
			}

			.login-submit {
				margin-top: 80rpx;
			}
		}
	}
</style>
